<template>
	<view class="detail-container">
		<navbar title="产品详情">
			<view slot="left"></view>
		</navbar>
		<template v-if="!loading">
			<view class="swiper-box">
				<u-swiper class="swiper" radius="0" :autoplay="false" :current="current" key-name="imageUrl" height="700rpx"
					:list="swiperList" @change="(e) => this.current = e.current" @click="onClickSwiper"></u-swiper>
			</view>
			<view class="detail-content">
				<view class="group head-group">
					<view class="pic-box">
						<scroll-view class="pic-scroll" scroll-x :scroll-into-view="`pic-${current}`" scroll-with-animation>
							<view v-for="(item, index) in swiperList" :key="index" :id="'pic-' + index" class="pic-item"
								:class="{active: index === current}" @click="current = index">
								<image :src="item.imageUrl" mode="aspectFill" />
							</view>
						</scroll-view>
						<view class="num-box"><text>{{ current+1 }}</text>/{{ swiperList.length }}</view>
					</view>
					<view class="goods-head">
						<view class="goods-name">
							<view>{{ detail.spuName }}</view>
							<button open-type="share" hover-class="none" class="share-btn iconfont icon-share"></button>
						</view>
						<view class="sku-no muted fz-24" v-if="currentSku.skuNo">{{currentSku.skuNo}}</view>
						<view class="goods-price">
							<text class="now-price">￥<text>{{ currentSku.nowPrice || 0 }}</text></text>
							<!--<text class="origin-price">￥{{ currentSku.originPrice || 0}}</text>-->
							<!--<text class="unit muted ml-5">/{{ detail.unitName }}</text>-->
						</view>
						<!--<view class="goods-desc muted mt-10 fz-26">{{ detail.supplierName }}</view>-->
					</view>
				</view>

				<view class="group">
					<view class="group-title">规格属性</view>
					<view class="cell-group">
						<view class="cell" v-for="(item, index) in specList">
							<view class="cell-left">{{ item.specName || '' }} <text class="ml-10"
									v-if="item.specNameEn">({{item.specNameEn}})</text></view>
							<view class="cell-right">{{ item.specValue }}</view>
						</view>
					</view>
				</view>
				<view class="group">
					<view class="group-title">详情介绍</view>
					<view class="detail">
						<rich-text :nodes="currentSku.skuDetailHtml" preview class="rich" v-if="currentSku.skuDetailHtml"
							@itemclick="clickImage" />
					</view>
				</view>
			</view>
			<u-safe-bottom />
			<view class="footer" v-if="showFooter">
				<view class="footer-place" />
				<view class="footer-fixed">
					<view class="footer-content">
						<view class="left">
							<view :class="['iconfont', currentSku.collectFlag ? 'icon-follow-full' : 'icon-follow']"
								@click="collect(currentSku.collectFlag)" />
							<view class="iconfont icon-cart" @click="toPage('/pages/my/cart/cart')" />
						</view>
						<view class="right">
							<view class="btn" @click="addToCart">加入清单</view>
							<view class="btn" @click="callModalShow = true">联系</view>
						</view>
					</view>
					<u-safe-bottom />
				</view>
			</view>
		</template>
		<c-popup v-model="callModalShow" title="联系">
			<view class="call-modal">
				<view class="cell-item" v-for="(item, index) in detail.phoneList" :key="index" @click="callPhone(item.phone)">
					<image :src="item.avatar" />
					<view class="phone-info">
						<view class="name">{{item.name}}
							<view class="label">{{item.postion}}</view>
						</view>
						<view class="email">{{item.email}}</view>
					</view>
					<view class="call"><text class="iconfont icon-call"></text></view>
				</view>
			</view>
			<view slot="foot"></view>
		</c-popup>
	</view>
</template>

<script>
	import {
		addCart,
		collectGoods,
		collectRemoveGoods,
		getGoodsDetail
	} from "@/api/goods";
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				source: '',
				id: '',
				current: 0,
				detail: {},
				swiperList: [],
				showFooter: false,
				collectLoading: false,
				callModalShow: false,
				loading: true
			};
		},
		computed: {
			...mapGetters(['userId']),
			currentSku() {
				if (!this.swiperList.length) return {}
				return this.swiperList[this.current]
			},
			specList() {
				if (!this.swiperList.length) return []
				return this.swiperList[this.current].specList || []
			}
		},
		methods: {
			init() {
				this.loading = true
				uni.showLoading()
				getGoodsDetail({
					id: this.id
				}).then(res => {
					console.log(res)
					res.detailHtml = this.$utils.formatRichText(res.detailHtml)
					this.detail = res
					let skuList = (res.skuList || []).map(item => {
						item.skuDetailHtml = this.$utils.formatRichText(item.skuDetailHtml)
						return item
					})
					this.current = skuList.findIndex(item => item.id == this.id)
					this.swiperList = skuList
				}).finally(() => {
					this.loading = false
					uni.hideLoading()
				})
			},
			onClickSwiper(index) {
				let images = this.swiperList.map(item => item.imageUrl)
				uni.previewImage({
					urls: images,
					showmenu: false,
					current: index
				})
			},
			clickImage(e) {
				const node = e.detail.node
				if (node.name == 'img') {
					uni.previewImage({
						urls: [node.attrs.src]
					})
				}
			},
			collect(status) {
				if (!this.checkLogin()) return
				if (this.collectLoading) return
				this.collectLoading = true
				uni.showLoading({
					mask: true,
				})
				const api = status ? collectRemoveGoods({
					id: this.currentSku.id
				}) : collectGoods({
					type: 'sku',
					businessId: this.currentSku.id
				})
				api.then(res => {
					this.currentSku.collectFlag = !status
					this.$toast(status ? '取消收藏成功' : '收藏成功')
				}).finally(() => {
					this.collectLoading = false
				})
			},
			addToCart() {
				if (!this.checkLogin()) return
				uni.showLoading({
					mask: true,
				})
				addCart({
					skuId: this.currentSku.id,
					quantity: 1,
				}).then(res => {
					this.$toast('加入清单成功')
				})
			},
			checkLogin() {
				if (!this.userId) {
					this.$toast('请先登录', () => {
						let url = '/pages/login/index?redirect=' + encodeURIComponent('/pages/goods/detail?id=' + this.id +
							'&type=' + this.source)
						uni.navigateTo({
							url,
						})
					})
					return false
				}
				return true
			},
			toPage(url) {
				if (url.indexOf('cart') > -1 && !this.checkLogin()) return
				uni.navigateTo({
					url: url,
				})
			},
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			}
		},
		watch: {
			current() {
				this.share.path = `/pages/goods/detail?id=${this.currentSku.id}&type=${this.source}`
			}
		},
		onLoad(options) {
			this.id = options.id
			this.source = options.type
			this.showFooter = options.type == 'xuancai'
			this.init()
		},
	}
</script>

<style lang="scss">
	@import "@/static/styles/minix.scss";

	page {
		background: #f4f4f4;
	}

	.detail-container {
		.swiper-box {
			position: relative;

			.indicator {
				position: absolute;
				right: 32rpx;
				bottom: 20rpx;
				padding: 0 20rpx;
				line-height: 40rpx;
				color: #fff;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 40rpx;
			}
		}

		.detail-content {
			.group {
				background: #fff;
				position: relative;
				border-radius: 26rpx 26rpx 0 0;
				padding: 28rpx 26rpx;
				margin-bottom: 20rpx;

				&.head-group {
					margin-top: -48rpx;
					padding-top: 14rpx;
				}

				.group-title {
					font-size: 30rpx;
					font-weight: bold;
					position: relative;
					padding-left: 14rpx;
					margin-bottom: 20rpx;

					&:after {
						content: "";
						display: block;
						height: 22rpx;
						width: 6rpx;
						border-radius: 2rpx;
						background: #000;
						position: absolute;
						top: 50%;
						left: 0;
						transform: translateY(-50%);
					}
				}
			}

			.pic-box {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.label {
					font-size: 24rpx;
					color: #999;
					margin-right: 10rpx;
				}

				.pic-scroll {
					flex: 1;
					overflow: auto;
					white-space: nowrap;

					.pic-item {
						width: 80rpx;
						height: 80rpx;
						border-radius: 100%;
						margin-right: 20rpx;
						overflow: hidden;
						display: inline-block;
						border: 2px solid #fff;

						&.active {
							border-color: #e0b883;
						}

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.num-box {
					margin-left: 10rpx;
					color: $-color-gray;

					text {
						color: #000;
						font-size: 36rpx;
					}
				}
			}

			.goods-head {
				.goods-name {
					display: flex;
					align-items: baseline;
					margin: 20rpx 0 10rpx 0;

					view {
						flex: 1;
						font-size: 34rpx;
						margin-right: 20rpx;
					}

					.share-btn {
						font-size: 40rpx;
						color: $-color-gray;
						line-height: inherit;
					}
				}

				.goods-price {
					margin-top: 20rpx;

					.now-price {
						color: #DFB583;
						margin-right: 10rpx;

						text {
							font-size: 46rpx;
						}
					}

					.origin-price {
						color: $-color-muted;
						font-size: 30rpx;
						text-decoration: line-through;
					}
				}
			}

			.cell-group {
				.cell {
					@include flex-between;
					padding: 10rpx 0;

					.cell-left {
						color: $-color-gray;
					}
				}
			}

			.rich {
				line-height: 1.5;

				img,
				image {
					max-width: 100%;
				}
			}
		}

		.footer-place {
			height: 90rpx;
		}

		.footer-fixed {
			position: fixed;
			width: 100%;
			background: #ffff;
			bottom: 0;
			z-index: 999;

			.footer-content {
				height: 90rpx;
				@include flex-between;

				.left {
					display: flex;
					align-items: center;
					padding-left: 28rpx;

					.iconfont {
						font-size: 50rpx;
						margin-right: 40rpx;

						&.icon-follow-full {
							color: #e0b883;
						}
					}
				}

				.right {
					display: flex;
					flex: 1;
					height: 100%;
					text-align: center;
					font-size: 32rpx;
					line-height: 90rpx;
					color: #fff;

					.btn {
						flex: 1;

						&:first-child {
							background: #000;
						}

						&:last-child {
							background: linear-gradient(to right, #f2e0b9, #e0b883);
						}
					}
				}
			}
		}

		.call-modal {
			.cell-item {
				@include flex-between;
				margin-bottom: 20rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.phone-info {
					flex: 1;

					.name {
						font-size: 30rpx;
						margin-bottom: 10rpx;
						display: flex;
						align-items: center;

						.label {
							font-size: 24rpx;
							color: #fff;
							margin-left: 10rpx;
							background: #ffa225;
							padding: 2rpx 10rpx;
							border-radius: 4rpx;
						}
					}

					.email {
						font-size: 28rpx;
						color: #999;
					}
				}

				.call {
					font-size: 46rpx;
					color: #000;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>